<template>
  <view class="tui-userinfo-box">
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />

    <tui-list-cell padding="0" :arrow="true" @click="changeAvatar">
      <view class="tui-list-cell">
        <view class="left-label">头像</view>
        <image :src="userInfo.headImage" class="tui-avatar" />
      </view>
    </tui-list-cell>

    <tui-list-cell padding="0" :hover="false" :arrow="true">
      <view class="tui-list-cell">
        <view class="left-label">姓名</view>
        <view class="tui-content">
          <tui-input
            baakground="none"
            color="#666"
            size="26rpx"
            padding="13rpx 0"
            :borderBottom="false"
            textRight
            v-model="userInfo.userName"
            placeholder="请输入姓名"
          ></tui-input>
        </view>
      </view>
    </tui-list-cell>

    <tui-list-cell padding="7.5px 0" :arrow="true" @click="changeSex">
      <view class="tui-list-cell">
        <view class="left-label">性别</view>
        <view class="tui-content">{{userInfo.gender==1?'男':'女'}}</view>
      </view>
    </tui-list-cell>

    <tui-list-cell padding="0" :hover="false" :arrow="true">
      <view class="tui-list-cell">
        <view class="left-label">昵称</view>
        <view class="tui-content">
          <tui-input
            backgroundColor="none"
            color="#666"
            size="26rpx"
            padding="13rpx 0"
            :borderBottom="false"
            textRight
            v-model="userInfo.nickName"
            placeholder="请输入昵称"
          ></tui-input>
        </view>
      </view>
    </tui-list-cell>

    <tui-list-cell padding="0" :hover="false" :arrow="true">
      <view class="tui-list-cell">
        <view class="left-label">手机号码</view>
        <view class="tui-content">
          <tui-input
            backgroundColor="none"
            size="26rpx"
            textRight
            padding="13rpx 0"
            :borderBottom="false"
            v-model="userInfo.mobile"
            placeholder="手机"
          ></tui-input>
        </view>
      </view>
    </tui-list-cell>

      <tui-list-cell padding="8px 0" :arrow="true" @click="showDate">
        <view class="tui-list-cell">
          <view class="left-label">出生日期</view>
          <view class="tui-content">{{userInfo.dataType === 'solar' ? '阳历' : '阴历'}}{{userInfo.birthDate}}</view>
        </view>
      </tui-list-cell>
    <tui-datetime ref="dateTime" :type="1" @confirm="changeDate">
    </tui-datetime>

    <xTimePicker :calendar="userInfo.dataType" ref="xTimePickerRef" @submit="changeDate" />
<!--    <picker mode="date" @change="changeDate">-->

<!--    </picker>-->

    <tui-list-cell padding="8px 0" v-if="isShowMsg == 'Y'" :hover="false" :arrow="true" @click="showPlaceFn(true)">
      <view class="tui-list-cell">
        <view class="left-label">出生地点</view>
        <tui-picker
          mode="multiSelector"
          :show="showPlace"
          :layer="3"
          :pickerData="items__1"
          @hide="showPlaceFn(false)"
          @change="changePlace"
        ></tui-picker>
        <view class="tui-content">{{userInfo.birthPlace || '请选择出生地点'}}</view>
      </view>
    </tui-list-cell>

    <tui-list-cell padding="8px 0" v-if="isShowMsg == 'Y'" :hover="false" :arrow="true" @click="showxz(true)">
      <view class="tui-list-cell">
        <view class="left-label">星座</view>

        <view
          class="tui-content"
        >{{userInfo.constellation != null ?showxzFn(userInfo.constellation) : '请选择星座'}}</view>
      </view>
    </tui-list-cell>

    <view class="btn-wrapper">
      <tui-form-button @click="saveUserInfo" background="#c09351">保存</tui-form-button>
    </view>

    <tui-picker
      mode="multiSelector"
      @change="changeXz"
      :show="xz"
      :layer="1"
      :pickerData="list"
      @hide="showxz(false)"
    ></tui-picker>

    <tui-tips ref="toast"></tui-tips>
  </view>
</template>

<script>
import { userUpdataApi } from "@/apis/user";
import { commonStorage } from "@/utils/common.js";
import cityData from "@/utils/city.js";
import showPage from '@/utils/showPage'
import xTimePicker from '@/components/x-time-picker/x-time-picker.vue'

export default {
  mixins: [showPage],
components: { xTimePicker },
  data() {
    return {
      items__1: cityData,

      userInfo: {
        headImage: "",
        gender: 1, // 0女  1男
        birthPlace: "",
        birthDate: "",
        mobile: "",
        nickName: "",
        userName: "",
        constellation: "0"
      },
      showPlace: false,
      list: [
        {
          value: "0",
          text: "白羊座"
        },
        {
          value: 1,
          text: "金牛座"
        },
        {
          value: 2,
          text: "双子座"
        },
        {
          value: 3,
          text: "巨蟹座"
        },

        {
          value: 4,
          text: "狮子座"
        },
        {
          value: 5,
          text: "处女座"
        },
        {
          value: 6,
          text: "天秤座"
        },
        {
          value: 7,
          text: "天蝎座"
        },

        {
          value: 8,
          text: "射手座"
        },
        {
          value: 9,
          text: "魔羯座"
        },
        {
          value: 10,
          text: "水瓶座"
        },
        {
          value: 11,
          text: "双鱼座"
        }
      ],
      xz: false
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    changeXz(e) {
      this.userInfo.constellation = e.value;
    },
    showxz(flag) {
      this.xz = flag;
    },
    showxzFn(value) {
      let info = this.list.find(ls => ls.value == value);
      if (info) {
        return info.text;
      }
    },
    async saveUserInfo() {
      let { code } = await userUpdataApi({
        ...this.userInfo,
        birthDate:this.userInfo.birthDate
      });
      if (code == 1) {
        commonStorage.clearStorageSync();
        let options = {
          msg: "操作成功~",
          duration: 2000
        };
        commonStorage.setStorage("userInfo", JSON.stringify(this.userInfo));

        console.log(commonStorage.getStorageSync("userInfo"));

        //需等组件初始化完成，确认已获取到组件实例
        this.$refs.toast && this.$refs.toast.showTips(options);

        this.$emit('toSave')
      }
    },
    async getUserInfo() {
      let userInfo =
        commonStorage.getStorageSync("userInfo") &&
        JSON.parse(commonStorage.getStorageSync("userInfo"));
      if (userInfo) {
        this.userInfo = userInfo;
      }
    },

    changeAvatar() {
      uni.chooseImage({
        count: 1,
        mediaType: ["image"],
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: async chooseImageRes => {
          const tempFilePath = chooseImageRes.tempFiles[0];
          let _this = this;
          uni.uploadFile({
            url: "/common/upload",
            filePath: tempFilePath.path,
            name: "file",
            formData: {
              file: tempFilePath
            },
            success(uploadFileRes) {
              let userAv = JSON.parse(uploadFileRes.data);
              _this.userInfo.headImage = userAv.data;
            },
            fail(err) {
              console.log(err, "error");
            }
          });
        }
      });
    },

    changeSex() {
      let that = this;
      uni.showActionSheet({
        itemList: ["男", "女"],
        success(e) {
          console.log(e);
          let sex = ["男", "女"][e.tapIndex];
          that.userInfo.gender = sex == "男" ? 1 : 0;
        }
      });
    },
    showDate(e) {
      this.$refs.xTimePickerRef && this.$refs.xTimePickerRef.show();
      // this.$refs.dateTime && this.$refs.dateTime.show();
    },
    changeDate(e) {
      console.log(e)
      // calendar: "solar"
      // day: "13"
      // hour: "09"
      // minute: "19"
      // month: "09"
      // second: "58"
      // year: "2024" 2024-08-23 00:00:00
      this.userInfo.dataType = e.calendar;
      this.userInfo.birthDate = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
      // this.userInfo.birthDate = e.detail.value + " 00:00:00";
    },
    showPlaceFn(flag) {
      this.showPlace = flag;
    },
    changePlace(e) {
      this.userInfo.birthPlace = e.result;
    }
  }
};
</script>

<style lang="scss">
.tui-userinfo-box {
  flex-grow: 1;
  color: #333;
  position: relative;
  // background: url(../../static/imgs/myBg.png);
  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    // z-index: 1;
  }
}

.tui-list-cell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 60rpx 24rpx 30rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  position: relative;
  background: none !important;
  .left-label {
    font-size: 26rpx;
    color: #666;
  }
  .tui-cell__line {
    border-bottom: none !important;
  }
  .file_input {
    position: absolute;
    z-index: 1;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.tui-pr30 {
  padding-right: 30rpx;
}

.tui-avatar {
  width: 70rpx;
  height: 70rpx;
  display: block;
}

.tui-content {
  font-size: 26rpx;
  color: #666;
}

.btn-wrapper {
  padding: 0 20px;
  margin-top: 20px;
}
</style>
